<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" th:fragment="layout">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${pageTitle} ?: 'HTTP性能压测工具'">HTTP性能压测工具</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <!-- 自定义样式 -->
    <style>
        .sidebar {
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        }
        
        .sidebar .nav-link {
            color: rgba(255,255,255,0.8);
            padding: 12px 20px;
            border-radius: 8px;
            margin: 5px 10px;
            transition: all 0.3s ease;
        }
        
        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            color: white;
            background-color: rgba(255,255,255,0.2);
            transform: translateX(5px);
        }
        
        .sidebar .nav-link i {
            width: 20px;
            text-align: center;
            margin-right: 10px;
        }
        
        .main-content {
            background-color: #f8f9fa;
            min-height: 100vh;
        }
        
        .card {
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            border: none;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        
        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px 10px 0 0 !important;
            padding: 15px 20px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 25px;
            padding: 8px 20px;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        
        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
        }
        
        .status-badge {
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .status-running { background-color: #d4edda; color: #155724; }
        .status-completed { background-color: #cce7ff; color: #004085; }
        .status-failed { background-color: #f8d7da; color: #721c24; }
        .status-stopped { background-color: #fff3cd; color: #856404; }
        
        .footer {
            background-color: #343a40;
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 50px;
        }
        
        .loading-spinner {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .table th {
            border-top: none;
            background-color: #f8f9fa;
            font-weight: 600;
        }
        
        .progress {
            height: 8px;
            border-radius: 4px;
        }
        
        .metric-card {
            text-align: center;
            padding: 20px;
        }
        
        .metric-card .metric-value {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
            margin: 10px 0;
        }
        
        .metric-card .metric-label {
            font-size: 0.9rem;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
    </style>
    
    <!-- 页面特定样式 -->
    <th:block th:fragment="page-styles"></th:block>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <i class="fas fa-tachometer-alt me-2"></i>
                HTTP性能压测工具
            </a>
            <span class="navbar-text">
                <small>v1.0.0</small>
            </span>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-3 col-lg-2 px-0">
                <div class="sidebar">
                    <div class="position-sticky pt-3">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a class="nav-link" href="/" th:classappend="${#httpServletRequest.requestURI == '/' ? 'active' : ''}">
                                    <i class="fas fa-home"></i>
                                    首页
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/configs" th:classappend="${#strings.startsWith(#httpServletRequest.requestURI, '/configs') ? 'active' : ''}">
                                    <i class="fas fa-cogs"></i>
                                    场景配置
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/tests" th:classappend="${#strings.startsWith(#httpServletRequest.requestURI, '/tests') ? 'active' : ''}">
                                    <i class="fas fa-play-circle"></i>
                                    测试执行
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/reports" th:classappend="${#strings.startsWith(#httpServletRequest.requestURI, '/reports') ? 'active' : ''}">
                                    <i class="fas fa-chart-line"></i>
                                    测试报告
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 主内容区域 -->
            <div class="col-md-9 col-lg-10">
                <div class="main-content p-4">
                    <!-- 页面内容 -->
                    <main th:replace="${contentTemplate}">
                        <!-- 默认内容 -->
                        <div class="text-center">
                            <h2>欢迎使用HTTP性能压测工具</h2>
                            <p class="text-muted">请选择左侧菜单开始使用</p>
                        </div>
                    </main>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <span>&copy; 2024 HTTP性能压测工具 - 基于JDK 1.8开发</span>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- 公共JavaScript -->
    <script>
        // 通用工具函数
        const AppUtils = {
            // 显示加载状态
            showLoading: function(selector) {
                $(selector || '.loading-spinner').show();
            },
            
            // 隐藏加载状态
            hideLoading: function(selector) {
                $(selector || '.loading-spinner').hide();
            },
            
            // 显示成功提示
            showSuccess: function(message) {
                this.showAlert('success', message);
            },
            
            // 显示错误提示
            showError: function(message) {
                this.showAlert('danger', message);
            },
            
            // 显示警告提示
            showWarning: function(message) {
                this.showAlert('warning', message);
            },
            
            // 显示信息提示
            showInfo: function(message) {
                this.showAlert('info', message);
            },
            
            // 显示通用提示
            showAlert: function(type, message, duration = 5000) {
                const alertId = 'alert-' + Date.now();
                const alertHtml = `
                    <div id="${alertId}" class="alert alert-${type} alert-dismissible fade show position-fixed" 
                         style="top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
                        ${message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `;
                
                $('body').append(alertHtml);
                
                // 自动关闭
                setTimeout(() => {
                    $('#' + alertId).fadeOut(() => {
                        $('#' + alertId).remove();
                    });
                }, duration);
            },
            
            // 格式化时间
            formatTime: function(timestamp) {
                if (!timestamp) return 'N/A';
                const date = new Date(timestamp);
                return date.toLocaleString('zh-CN');
            },
            
            // 格式化持续时间
            formatDuration: function(milliseconds) {
                if (!milliseconds || milliseconds <= 0) return '0秒';
                
                const seconds = Math.floor(milliseconds / 1000);
                const minutes = Math.floor(seconds / 60);
                const hours = Math.floor(minutes / 60);
                
                if (hours > 0) {
                    return `${hours}小时${minutes % 60}分钟${seconds % 60}秒`;
                } else if (minutes > 0) {
                    return `${minutes}分钟${seconds % 60}秒`;
                } else {
                    return `${seconds}秒`;
                }
            },
            
            // 格式化文件大小
            formatBytes: function(bytes) {
                if (!bytes || bytes === 0) return '0 B';
                
                const k = 1024;
                const sizes = ['B', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            },
            
            // 格式化数字
            formatNumber: function(num) {
                if (!num) return '0';
                return num.toLocaleString('zh-CN');
            }
        };
        
        // 全局错误处理
        $(document).ajaxError(function(event, xhr, settings, error) {
            console.error('AJAX Error:', error, xhr);
            AppUtils.showError('请求失败: ' + (xhr.responseJSON?.message || error));
        });
    </script>
    
    <!-- 页面特定脚本 -->
    <th:block th:fragment="page-scripts"></th:block>
</body>
</html>